<template>
  <article class="page">
    <headerbar>统计分析</headerbar>
    <ul class="top-menu">
      <li @click="go('')" :class="{'active':routeName == ''}"><span>我的</span></li>
      <li @click="go('')" :class="{'active':routeName == ''}"><span>培训机构</span></li>
      <li @click="go('')" :class="{'active':routeName == ''}"><span>讲师</span></li>
      <li @click="go('')" :class="{'active':routeName == ''}"><span>本单位</span></li>
      <li @click="go('')" :class="{'active':routeName == ''}"><span>主办本单位</span></li>
    </ul>
    <section class="frame-content-sub no-bg">
      <div class="bg-white">

        <div id="vpie" style="height:calc(100vh - 200px);"></div>

      </div>
    </section>
  </article>
</template>

<script>
  import echarts from 'echarts'
  let data = [
    {value: 335, name: '直达60'},
    {value: 679, name: '营销广告'},
    {value: 1548, name: '搜索引擎'}
  ]
  export default {
    name: 'statisticalAnalysis',
    data () {
      return {
        routeName: '',
        id: 'vpie',
        charData: data
      }
    },
    methods: {
      drawPie (id) {
        this.charts = echarts.init(document.getElementById(id))
        let data = this.charData
        let _data = {
          series: [
            {
              name: '',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '80%'],

              label: {
                position: 'inner'
              },
              labelLine: {
                show: false
              },
              data: data
            }
          ]
        }
        this.charts.setOption(_data)
      }
    },
    mounted () {
      this.$nextTick(function () {
        this.drawPie(this.id)
      })
    }
  }
</script>

<style scoped>

</style>

